<template>
  <div class="basetable" v-loading="loading" element-loading-text="拼命加载中">
    <el-header class="edit_head">
      <div style="margin-left: 20px" class="divsearch">
        <span style="width: 35px" class="spansearch">姓名</span>
        <el-input
          size="mini"
          placeholder="姓名搜索"
          style="width: 100px; margin-left: 16px"
          @input="searchClickname"
          clearable
          v-model="inputname"
        >
        </el-input>
      </div>
      <div class="divsearch">
        <span style="width: 60px" class="spansearch">身份证号</span>
        <el-input
          size="mini"
          placeholder="身份证号搜索"
          style="width: 200px; margin-left: 16px"
          @input="searchClickuser_code"
          clearable
          v-model="inputuser_code"
        >
        </el-input>
      </div>
      <div class="divsearch">
        <span style="width: 60px" class="spansearch">手机号码</span>
        <el-input
          size="mini"
          placeholder="手机号码搜索"
          style="width: 200px; margin-left: 16px"
          @input="searchClickmobile"
          clearable
          v-model="inputmobile"
        >
        </el-input>
      </div>
      <div style="margin-left: 20px; display: flex;justify-content: space-around;width: 470px;" class="divsearch">
        <span class="spansearcha" style="">班级筛选</span>
        <el-select
          clearable
          size="mini"
          @change="selectGet($event)"
          style="width: 150px; height: 28px"
          v-model="value"
          placeholder="请选择"
        >
          <el-option
            style="height: 100%"
            v-for="item in classId"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-button
          size="mini"
          style="height: 30px; margin-left: 50px"
          @click="Clearfilter"
          >清除筛选</el-button
        >
        <el-button size="mini" type="primary" @click="deriveClick">导出</el-button>
      </div>
      <el-button style="margin-bottom:20px;" size="mini" type="primary" @click="imgmore">图片批量保存</el-button>
    </el-header>
    <el-table ref="filterTable" :data="tableDataEnd" border style="width: 100%">
      <el-table-column
        type="index"
        width="50"
        label="序号"
        fixed
      ></el-table-column>
      <el-table-column prop="username" label="姓名"></el-table-column>
      <el-table-column
        prop="user_code"
        label="身份证号码"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号码"
        width="130"
      ></el-table-column>
      <el-table-column prop="card_img" label="身份证照片" width="110">
        <template scope="scope">
          <img
            :src=" scope.row.card_img"
            width="80"
            height="80"
          />
        </template>
      </el-table-column>
      <el-table-column prop="half_img" label="半身照" width="110">
        <template scope="scope">
          <img
            :src=" scope.row.half_img"
            width="80"
            height="80"
          />
        </template>
      </el-table-column>
      <el-table-column prop="user_code_img" label="身份证复印件" width="110">
        <template scope="scope">
          <img
            :src=" scope.row.user_code_img"
            width="80"
            height="80"/> 
        </template>
      </el-table-column>
      <el-table-column prop="minzu" label="名族" width="80"></el-table-column>
      <el-table-column prop="age" label="年龄" width="80"></el-table-column>
      <el-table-column label="性别" width="60">
        <template slot-scope="scope">
          <el-tag type="text" effect="light" v-if="scope.row.sex == 1"
            >男</el-tag
          >
          <el-tag effect="light" v-if="scope.row.sex == 2">女</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="婚姻状况" width="80">
        <template slot-scope="scope">
          <el-tag type="text" effect="light" v-if="scope.row.mer_status == 1"
            >已婚</el-tag
          >
          <el-tag effect="light" v-if="scope.row.mer_status == 2">未婚</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="就业情况" width="80">
        <template slot-scope="scope">
          <el-tag type="text" effect="light" v-if="scope.row.job_status == 2"
            >已就业</el-tag
          >
          <el-tag type="text" effect="light" v-if="scope.row.job_status == 1"
            >未就业</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="job_to" label="就业意向"></el-table-column>
      <el-table-column prop="learn_level" label="文化程度"></el-table-column>
      <el-table-column
        prop="birth"
        label="出生日期"
        width="100"
      ></el-table-column>

      <el-table-column fixed="right" width="240" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row)" type="primary" size="small"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="success"
            @click="downa(scope.$index, scope.row)"
            >图片保存</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑 -->
    <el-dialog
      title="个人信息"
      :visible.sync="dialogVisible"
      width="750px"
      :before-close="handleClose"
    >
      <el-form
        class="abc"
        :label-position="labelPosition"
        label-width="100px"
        :model="formLabelAlign"
      >
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item class="inputedit" label="姓名">
              <el-input v-model="formLabelAlign.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item class="inputedit" label="身份证号">
              <el-input v-model="formLabelAlign.user_code"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item class="inputedit" label="手机号码">
              <el-input v-model="formLabelAlign.mobile"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item class="inputedit" label="名族">
              <el-input v-model="formLabelAlign.minzu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item class="inputedit" label="年龄">
              <el-input v-model="formLabelAlign.age"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item class="inputedit" label="性别">
              <el-radio v-model="radio1" label="1" @change="getValue()"
                >男</el-radio
              >
              <el-radio v-model="radio1" label="2" @change="getValue()"
                >女</el-radio
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item class="inputedit" label="出生日期">
              <el-input v-model="formLabelAlign.birth"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item class="inputedit" label="婚姻状况">
              <el-radio v-model="radio2" label="1" @change="getValue()"
                >已婚</el-radio
              >
              <el-radio v-model="radio2" label="2" @change="getValue()"
                >未婚</el-radio
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item class="inputedit" label="文化程度">
              <el-input
                el-input
                v-model="formLabelAlign.learn_level"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item class="inputedit" label="就业情况">
              <el-radio v-model="radio3" label="1" @change="getValue()"
                >未就业</el-radio
              >
              <el-radio v-model="radio3" label="2" @change="getValue()"
                >已就业</el-radio
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item class="inputedit" label="就业意向">
              <el-input v-model="formLabelAlign.job_to"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item class="inputedit" label="选择班级">
              <el-select
                v-model="value2"
                @change="moreclass($event)"
                @remove-tag='moreclassa($event)'
                multiple
                collapse-tags
                placeholder="请选择">
                <el-option
                  v-for="item in classId"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>          
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="身份证照片" style="margin-bottom: 20px">
              <el-upload
                class="avatar-uploader"
                :action="urlimg"
                :multiple="false"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="avatarimg" :src="avatarimg" class="avatar"  />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="半身照" style="margin-bottom: 20px">
              <el-upload
                class="avatar-uploader"
                :action="urlimghalf"
                :multiple="false"
                :show-file-list="false"
                :on-success="handleAvatarSuccesshalf"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="halfImg" :src="halfImg" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>          
        </el-row >
            <el-form-item label="身份证复印件" style="margin-bottom: 20px;position: relative;">
              <el-upload
                class="avatar-uploader"
                :action="urlimgfy"
                :multiple="false"
                :show-file-list="false"
                :on-success="handleAvatarSuccesssfz"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="sfzImg" :src="sfzImg" class="avatar" style="width:337px;height:428px;"/>
                
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <template v-if="sfzImg">
                  <div  style="position: absolute;top:0;left:350px;" >
                    <el-link type="primary" target="_blank" :href="sfzImg">查看大图<i class="el-icon-view el-icon--right"></i> </el-link>
                  </div>
                </template>
            </el-form-item>
            
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 导出 -->
    <!--  -->
    <el-dialog
      title="导出片段"
      :visible.sync="dialogVisibletwo"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <div style="margin: 15px 0"></div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            @change="changebox($event)"
            v-for="(item, v) in cities"
            :label="item"
            :key="v"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibletwo = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleClick">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看证书 -->
    <el-dialog
      title="证书"
      :visible.sync="dialogVisibleSucc"
      width="30%"
      :before-close="handleClose"
    >
      <p>证书</p>
      <el-button @click="dialogVisibleSucc = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisibleSucc = false"
        >确 定</el-button
      >
    </el-dialog>
    <!-- 上传 -->
    <el-dialog
      title="上传证书"
      :visible.sync="dialogVisibleUpload"
      width="60%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="证书编号">
          <el-input placeholder="请输入证书编号" v-model="form.name"></el-input>
        </el-form-item>
      </el-form>
      <el-form
        class="abc"
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item label="id">
          <el-input v-model="formLabelAlign.id"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="dialogVisibleUpload = false">取 消</el-button>
      <el-button :plain="true" type="primary" @click="uploda">确 定</el-button>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 25, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableDataEnd.length"
    >
    </el-pagination>
  </div>
</template>
    
<script>
const cityOptions = [
  "姓名",
  "身份证号码",
  "民族",
  "年龄",
  "性别",
  "出生日期",
  "婚姻状况",
  "手机号码",
  "文化程度",
  "就业情况",
  "就业意向",
];
export default {
  data() {
    return {
      checkbox: "",
      loading: false,
      avatarimg: "",
      halfImg: "",
      sfzImg: "",
      tableDataBegin: [],
      tableDataName: "",
      tableDataEnd: [],
      currentPage: 1,
      pageSize: 2,
      totalItems: 0,
      filterTableDataEnd: [],
      flag: false,

      form: {},
      studyid: "",
      radio1: "",
      radio2: "",
      radio3: "",
      labelPosition: "right",
      input: "",
      tableData: [],
      search: "",
      tableHeight: window.innerHeight - 220,
      dialogVisible: false,
      dialogVisibletwo: false,
      checkAll: false,
      checkedCities: [],
      cities: [
        { name: "姓名", id: "username" },
        { name: "身份证号码", id: "user_code" },
        { name: "手机号码", id: "mobile" },
        { name: "民族", id: "minzu" },
        { name: "年龄", id: "age" },
        { name: "性别", id: "sex" },
        { name: "出生日期", id: "birth" },
        { name: "婚姻状况", id: "mer_status" },
        { name: "文化程度", id: "learn_level" },
        { name: "就业情况", id: "job_status" },
        { name: "就业意向", id: "job_to" },
      ],
      isIndeterminate: true,
      formLabelAlign: {},
      disabledInput: false,
      dialogVisibleSucc: false,
      dialogVisibleUpload: false,
      //摄像头
      videoWidth: 300,
      videoHeight: 300,
      thisCancas: null,
      thisContext: null,
      thisVideo: null,
      studentId: "",
      inputname: "", //搜索值姓名
      inputuser_code: "", //搜索值身份证号
      inputmobile: "", //搜索值手机号
      is_dela: "",
      job_to: "",
      pic: "",
      arr1: [],
      arr2: [],
      alllists: "",
      options: [],
      value: "",
      classId: "",
      datalists: "",
      allid:"",
      value2:[],
      classID:[],
      cd:'',
      cda:'',
      bcd:'',
      urlimg:'',
      urlimghalf:'',
      urlimgfy:'',
      halfImga:'',
      avatarimga:'',
      sfzImga:'',
    };
  },
  created() {
    this.get_classLists();
    this.traineeLists();
    this.totalItems = this.tableDataEnd.length;
    console.log(this.tableDataEnd);
    if (this.totalItems > this.pageSize) {
      for (let index = 0; index < this.pageSize; index++) {
        this.tableDataEnd.push(this.tableDataBegin[index]);
      }
    } else {
      this.tableDataEnd = this.tableDataBegin;
    }
  },
  methods: {
    checked(){
      console.log(a);
    },
    //编辑班级
    moreclass(val,index){
      console.log(val);
      console.log(3333);
      this.classID = val
    },
    moreclassa(val,index){
      console.log(val);
      console.log(444);
      // this.classID = val
    },
    //图片批量导出
    async imgmore(){
      let allimg = (await this.$api.home.down_all({
        class_id: this.allid
      })).data
      console.log("http://px.0123china.cn"+allimg.data);
      if(allimg.code == 200){
        window.open("http://px.0123china.cn"+allimg.data);
      }else if(allimg.code == 403){
        this.$notify.error({
          title: "错误",
          message: "没有照片可供保存",
        });
      }
    },
    //下载图片
    downa(index, row) {
      console.log(index, row);
      console.log(row.zip_file);
      if (row.zip_file != null && row.zip_file != "") {
        window.open(row.zip_file);
      } else {
        this.$notify.error({
          title: "错误",
          message: "没有照片可供保存",
        });
      }
    },
    //清除筛选条件
    Clearfilter(val) {
      this.value = ''
      console.log(val);
      this.loading = true;
      setTimeout(() => {
        this.traineeLists();
      }, 500);

      setTimeout(() => {
        this.loading = false;
      }, 1000);
      // this.tableDataBegin =
    },
    handleAvatarSuccess(res, file) {
      this.avatarimg = "http://px.0123china.cn/" + res.pic;
      this.avatarimga = res.pic;
      this.pic = res.pic; //上传图片接口
      console.log("res", res);
      console.log("file", file);
      this.picc = URL.createObjectURL(file.raw);
      console.log("this.picc", this.picc);
    },
    handleAvatarSuccesshalf(res, file) {
      this.halfImg = "http://px.0123china.cn/" + res.pic;
      this.halfImga = res.pic;
      this.pic = res.pic; //上传图片接口
      console.log("res", res);
      console.log("file", file);
      this.picc = URL.createObjectURL(file.raw);
      console.log("this.picc", this.picc);
    },
    handleAvatarSuccesssfz(res, file) {
      this.sfzImg = "http://px.0123china.cn/" + res.pic;
      this.sfzImga = res.pic;
      this.pic = res.pic; //上传图片接口
      console.log("res", res);
      console.log("file", file);
      this.picc = URL.createObjectURL(file.raw);
      console.log("this.picc", this.picc);
    },
    beforeAvatarUpload(file) {
      //上传前的函数
      //上传前对图片类型和大小进行判断
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //班级列表
    async get_classLists() {
      let class_lists = (await this.$api.home.get_classLists()).data.data;
      console.log("class_lists", class_lists);
      this.classId = class_lists;
      console.log(class_lists);
    },
    //学员列表
    async traineeLists() {
      let a = (await this.$api.home.traineeLists()).data.data;
      let lists = a;
      console.log("lists", lists);
      this.tableDataBegin = lists;
      this.tableDataEnd = lists;
      this.datalists = lists;
    },
    selectGet(e) {
      this.allid = e
      console.log(e);
      let obj = {};
      obj = this.classId.find((item) => {
        //这里的userList就是上面遍历的数据源
        return item.id === e; //筛选出匹配数据
      });
      // console.log(obj.name);//我这边的name就是对应label的
      let searchText = e;
      let list = [];
      if (searchText) {
        let a = this.datalists;
        var data = a.filter(function (item) {
          // return item.class_id == searchText;
          return item.class_id.indexOf(searchText) != -1;
        });
        this.tableDataEnd = data;
      } else {
        this.traineeLists();
      }
    },
    //编辑
    handleEdit(row) {
      this.urlimg="http://px.0123china.cn/api/v1.upload/up_new?type=1&user_code="+row.user_code
      this.urlimghalf="http://px.0123china.cn/api/v1.upload/up_new?user_code="+row.user_code
      this.urlimgfy="http://px.0123china.cn/api/v1.upload/up_new?type=2&user_code="+row.user_code
      console.log(row);
      this.cd = row.class_id
      console.log(row.class_id);
      this.studentId = row.id;
      this.radio1 = row.sex + "";
      this.radio2 = row.mer_status + "";
      this.radio3 = row.job_status + "";
      this.avatarimg = row.card_img;
      this.halfImg = row.half_img;
      this.sfzImg = row.user_code_img;
      this.formLabelAlign = row;
      this.disabledInput = false;
      this.dialogVisible = true;
      this.sfzImga = row.user_code_img.slice(22)
      this.avatarimga = row.card_img.slice(22)
      this.halfImga = row.half_img.slice(22)
      var a = new Array(row.class_id.split(","))//存入数组
      // a.split(",")//将["34"] =>[34]
      console.log(a[0].map(Number));
      this.value2 = a[0].map(Number)
    },
    //编辑操作
    async edit() {
      console.log(this.classID);
        let at = this.classID.map(String)
        this.cda = at.toString()
      // if(this.classID.length == 0){
      //   this.bcd = this.cd
      // }else{
        // let a = this.classID.map(String)
      //   console.log(a);
      //   console.log(a);
        // this.cda = a.toString()
      // }
      console.log(this.sfzImg);
      console.log(this.halfImg);
      console.log(this.avatarimg);
      let traineeAdd = await this.$api.home.traineeUpdate({
        username: this.formLabelAlign.username,
        user_code: this.formLabelAlign.user_code,
        minzu: this.formLabelAlign.minzu,
        age: this.formLabelAlign.age,
        sex: this.radio1,
        card_img: this.avatarimga,
        birth: this.formLabelAlign.birth,
        mer_status: this.radio2,
        mobile: this.formLabelAlign.mobile,
        learn_level: this.radio3,
        job_status: this.formLabelAlign.job_status,
        id: this.studentId,
        job_to: this.formLabelAlign.job_to,
        user_code_img: this.sfzImga,
        half_img: this.halfImga,
        class_id: this.cda
      });
      console.log(traineeAdd);
      let a = traineeAdd.data;
      if (a.code == 200) {
        this.dialogVisible = false;
        this.$notify({
          title: "成功",
          message: a.msg,
          type: "success",
        });
      } else {
        this.$notify.error({
          title: "错误",
          message: a.msg,
        });
      }

      console.log("录入学员:", traineeAdd);
    },
    handleClose(done) {
      done();
    },
    // 上传
    uploadClick(row) {
      this.formLabelAlign = row;
      this.studyid = row.id;
      this.disabledInput = false;
      this.dialogVisibleUpload = true;
    },
    getValue() {
      // console.log("this.ruleForm.sex", this.radio1);
      // console.log("this.ruleForm.mer_status", this.radio2);
      // console.log("this.ruleForm.job_status", this.radio3);
    },
    //上传证书
    async uploda() {
      let uploda = (
        await this.$api.home.datumLoad({
          uid: this.studyid,
          certify_code: this.form.name,
        })
      ).data;
      if (uploda.code == 403) {
        this.$notify.error({
          title: "错误",
          message: uploda.msg,
        });
      }
      // console.log("上传证书", uploda);
    },
    openData() {},
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    //查看证书
    successClick(row) {
      this.dialogVisibleSucc = true;
    },

    // 导出
    deriveClick() {
      this.dialogVisibletwo = true;
    },
    changebox(index, value) {
      // console.log(index,value);
    },
    // 导出字段
    handleCheckedCitiesChange(value) {
      this.arr1 = value.map((item) => item.name);
      this.arr2 = value.map((item) => item.id);
      let a = JSON.parse(JSON.stringify(this.arr1));
      let b = JSON.parse(JSON.stringify(this.arr2));
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    // 确定导出
    dialogVisibleClick(val) {
      console.log(val);
      this.dialogVisibletwo = false;
      // this.export2Excel();
    },
    // 导出
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../excal/Export2Excel");

        let a = JSON.parse(JSON.stringify(this.arr1));
        let b = JSON.parse(JSON.stringify(this.arr2));
        const tHeader = a; // 上面设置Excel的表格第一行的标题
        const filterVal = b; // 上面的index、phone_Num、school_Name是tableData里对象的属性
        const list = this.tableDataEnd; //把data里的tableDataEnd存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "学员列表");
      });
    },
    formatJson(filterVal, jsonData) {
      let bool = JSON.stringify(this.alllists !== "");
      console.log(this.alllists);
      console.log(this.alllists !== "");
      var c = jsonData.indexOf("");
      var allls = jsonData;
      if (JSON.stringify(this.alllists) == false) {
        var a = [];
        a.push(this.alllists);
        for (var i = 0; i < a.length; i++) {
          a[i].sex === 1 ? (jsonData[i].sex = "男") : (a[i].sex = "女");
          a[i].mer_status === 2
            ? (a[i].mer_status = "未婚")
            : (a[i].mer_status = "已婚");
          a[i].job_status === 1
            ? (a[i].job_status = "未就业")
            : (a[i].job_status = "已就业");
        }
        return a.map((v) => filterVal.map((j) => v[j]));
      } else {
        for (var i = 0; i < allls.length; i++) {
          allls[i].sex === 1 ? (allls[i].sex = "男") : (allls[i].sex = "女");
          allls[i].mer_status === 2
            ? (allls[i].mer_status = "未婚")
            : (allls[i].mer_status = "已婚");
          allls[i].job_status === 1
            ? (allls[i].job_status = "未就业")
            : (allls[i].job_status = "已就业");
        }
        return allls.map((v) => filterVal.map((j) => v[j]));
      }
    },
    searchClick() {
      console.log(this.input, 111);
    },
    //移除
    async handleDelete(index, rows) {
      let a = rows.id;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let delet = (
            await this.$api.home.traineeDelet({
              id: a,
            })
          ).data;
          if (delet.code == 200) {
            this.$notify({
              title: "成功",
              message: delet.msg,
              type: "success",
            });
          } else if (rows.is_del == 1) {
            this.$notify.error({
              title: "错误",
              message: "删除待审核",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: delet.msg,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // console.log("dele",delet);
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      //需要判断是否检索
      if (!this.flag) {
        this.currentChangePage(this.tableDataBegin);
      } else {
        this.currentChangePage(this.filterTableDataEnd);
      }
    },
    //组件自带监控当前页码
    currentChangePage(list) {
      let from = (this.currentPage - 1) * this.pageSize;
      let to = this.currentPage * this.pageSize;
      this.tableDataEnd = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tableDataEnd.push(list[from]);
        }
      }
    },
    //搜索姓名
    searchClickname() {
      let searchText = this.inputname;
      let list = [];
      if (searchText) {
        list = this.tableDataEnd.filter((e) => {
          console.log(e.username.match(searchText));
          return e.username.match(searchText);
        });
        this.tableDataEnd = list;
      } else {
        this.traineeLists();
      }
    },
    //搜索身份证号
    searchClickuser_code() {
      let searchText = this.inputuser_code;
      let list = [];
      if (searchText) {
        list = this.tableDataEnd.filter((e) => {
          return e.user_code.match(searchText);
        });
        this.tableDataEnd = list;
      } else {
        this.traineeLists();
      }
    },
    //搜索手机号
    searchClickmobile() {
      let searchText = this.inputmobile;
      let list = [];
      if (searchText) {
        list = this.tableDataEnd.filter((e) => {
          return e.mobile.match(searchText);
        });
        this.tableDataEnd = list;
      } else {
        this.traineeLists();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.spansearcha {
  width: 70px;
  color: #409eff;
  font-size: 15px;
}
/deep/.el-input .el-input--suffix {
  height: 28px;
  width: 200px;
}
.avatar {
  width: 102px;
  height: 102px;
}
.divsearch {
  margin-right: 25px;
  display: flex;
  line-height: 30px;
  margin-bottom: 20px;
}
.inputedit {
  margin-bottom: 20px;
}
.inputsearch {
  width: 15%;
}
.edit_head {
  height: auto !important;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  align-items: center;
  .input-with-select {
    max-width: 350px;
    margin-left: 20px;
    
  }
}
.el-tag {
  cursor: pointer;
}
//搜索框文字
.spansearch {
  color: #409eff;
  font-size: 15px;
}
//摄像头
.camera_outer {
  position: relative;
  overflow: hidden;
  // background: url("../../assets/img/user_0608_04.jpg") no-repeat center;
  background-size: 100%;
  video,
  canvas,
  .tx_img {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    
  }
  .btn_camera {
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.3);
    line-height: 50px;
    text-align: center;
    color: #ffffff;
  }
  .bg_r_img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
  }
  .img_bg_camera {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    img {
      width: 100%;
      height: 100%;
    }
    .img_btn_camera {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.3);
      color: #ffffff;
      .loding_img {
        width: 50px;
        height: 50px;
      }
    }
  }
}
.el-input__inner {
  height: 28px;
}
</style>